import React, { useEffect, useState } from 'react';
import { Select, Input, Space, Table, Switch, Modal, message } from 'antd'
import axios from 'axios'
import { connect } from 'react-redux'
import { kanjshopdel, kanjshopFillter, kanjshopSearch, kanjshopEdit } from './api/index'
import "../index.css"

// 砍价状态
const { Option } = Select;

// 搜索
const { Search } = Input;


const Bargain_goods = (props) => {
    const { kanjiashop } = props

    useEffect(() => {
        bargainGoods()
    }, [])// eslint-disable-line react-hooks/exhaustive-deps
    const bargainGoods = () => {
        axios.get('/bargain').then(res => {
            console.log(res, "shop")
            props.dispatch({
                type: "DATA_KANJIA_SHOP",
                payload: res.data.data
            })
        })
    }
    // table
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            id: 'id',
            align: "center"
        },
        {
            title: '砍价图片',
            dataIndex: 'img',
            id: 'img',
            align: "center",
            render: img => <img style={{ width: 55, height: 55 }} src={img} alt="" />
        },
        {
            title: '砍价名称',
            dataIndex: 'name',
            id: 'name',
            align: "center",
        },
        {
            title: '砍价价格',
            dataIndex: 'kjia',
            id: 'kjia',
            align: "center",
        },
        {
            title: '最低价',
            dataIndex: 'zuijia',
            id: 'zuijia',
            align: "center",
        },
        {
            title: '参与人数',
            dataIndex: 'ren',
            align: "center",
            id: 'ren',
        },
        {
            title: '帮忙砍价人数',
            dataIndex: 'bang',
            align: "center",
            id: 'bang',
        },
        {
            title: '砍价成功人数',
            dataIndex: 'cheng',
            align: "center",
            id: 'cheng',
        },
        {
            title: '限量',
            dataIndex: 'xianl',
            align: "center",
            id: 'xianl',
        },
        {
            title: '限量剩余',
            dataIndex: 'xianls',
            align: "center",
            id: 'xianls',
        },
        {
            title: '结束时间',
            dataIndex: 'time',
            id: 'time',
            align: "center",
        },
        {
            title: '砍价状态',
            dataIndex: 'zhuang',
            align: "center",
            id: 'zhuang',
            render: (text, record) => <Switch defaultChecked={record.zhuang === "true" ? true : false} onChange={() => change(record)} />

        },
        {
            title: '操作',
            id: 'action',
            align: "center",
            render: (text, record) => (
                <Space size="middle">
                    <span onClick={() => { handleEdit(record) }}>编辑</span>

                    <span onClick={() => { handledel(record.id) }}>删除</span>
                </Space>
            ),
        },
    ]
    // 状态
    const change = (record) => {
        if (record.zhuang === 1) {
            record.zhuang = "开启"
        } else {
            record.zhuang = "关闭"
        }
    }

    // 对话框 编辑
    // const [shopdata, setshopdata] = useState([])
    const [id, setid] = useState("")  // id
    const [img, setimg] = useState('')  // 图片 
    const [cname, setcname] = useState('')  // name
    const [kanjia, setkanjia] = useState("")  // kjia
    const [bastprice, setbastprice] = useState("")  // zuijia
    const [rens, setrens] = useState('')  // ren
    const [bangk, setbangk] = useState('')  // bang
    const [kjcheng, setkjcheng] = useState('')  // cheng
    const [xianliang, setxianliang] = useState('')  // xianl
    const [xianliangs, setxianliangs] = useState('')  // xians
    const [times, settimes] = useState('')  //time
    const [status, setstatus] = useState('')  // zhuang
    const [states, setstates] = useState('')  //zhuangs
    const [isModalVisible, setIsModalVisible] = useState(false); // 弹框显示隐藏
    const handleEdit = (item) => {
        // console.log(id)
        setIsModalVisible(true)
        setid(item.id)
        setimg(item.img)
        setcname(item.name)
        setkanjia(item.kjia)
        setbastprice(item.zuijia)
        setrens(item.ren)
        setbangk(item.bang)
        setkjcheng(item.cheng)
        setxianliang(item.xianl)
        setxianliangs(item.xianls)
        settimes(item.time)
        setstatus(item.zhuang)
        setstates(item.zhuangs)
    }

    const handleOk = () => {
        setIsModalVisible(false);
        kanjshopEdit({id:id,img:img,name:cname,kjia:kanjia,zuijia:bastprice,ren:rens,bang:bangk,cheng:kjcheng,xianl:xianliang,xianls:xianliangs,time:times,zhuang:status,zhuangs:states}).then(res => {
            console.log(res, "res123456")
            // props.dispatch({
            //     type: "DATA_KANJIA_SHOP",
            //     payload: res.data.data
            // })
        })
        bargainGoods();
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    // 删除
    const handledel = (id) => {
        // console.log(id)
        kanjshopdel({ id: id }).then(res => {
            console.log(res)
        })
        message.success("删除成功")
        bargainGoods()
    }

    // 搜索显示
    function handleChange(value) {
        // console.log(`selected ${value}`);
        const sou = `${value}`
        console.log(sou, "sou");
        kanjshopFillter({ sou }).then(
            res => {
                console.log(res)
                props.dispatch({
                    type: "DATA_KANJIA_SHOP",
                    payload: res.data.data
                })
            },

        )
        // bargainGoods()
    }


    // 搜索
    const onSearch = (value) => {
        console.log(value)
        const sou = value

        kanjshopSearch({ sou }).then(
            res => {
                console.log(res)
                props.dispatch({
                    type: "DATA_KANJIA_SHOP",
                    payload: res.data.data
                })
            }
        )
    }

    return (
        <div className="shop">
            <div className="shop-header">
                <div className="shop-typeSearch">
                    <div className="state">
                        <span>砍价状态：</span>
                        <Select defaultValue="请选择" style={{ width: 180 }} onChange={handleChange}>
                            <Option value="请选择">请选择</Option>
                            <Option value="关闭">关闭</Option>
                            <Option value="开启">开启</Option>
                        </Select>
                    </div>
                    <div className="swearch">
                        <span>商品搜索：</span>
                        <Space>
                            <Search placeholder="商品名称、id" allowClear onSearch={onSearch} style={{ width: 200 }} />
                        </Space>
                    </div>
                </div>

            </div>
            <div className="shop-main">
                <Table columns={columns}
                    dataSource={kanjiashop} rowKey="id"
                    //  scroll={{ y: 540 }} 
                    pagination={{ pageSize: 4 }} style={{ algin: "center" }} />
                {/* 编辑对话框 */}
                <Modal title="编辑砍价商品" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <p><span>ID：</span><Input value={id} onChange={(e) => { setid(e.target.value) }} /></p>
                    <p><span>砍价名称：</span><Input value={cname} onChange={(e) => { setcname(e.target.value) }} /></p>
                    <p><span>秒杀价格：</span><Input value={kanjia} onChange={(e) => { setkanjia(e.target.value) }} /></p>
                    <p><span>最低价：</span><Input value={bastprice} onChange={(e) => { setbastprice(e.target.value) }} /></p>
                    <p><span>参与人数：</span><Input value={rens} onChange={(e) => { setrens(e.target.value) }} /></p>
                    <p><span>帮忙砍价人数：</span><Input value={bangk} onChange={(e) => { setbangk(e.target.value) }} /></p>
                    <p><span>砍价成功人数：</span><Input value={kjcheng} onChange={(e) => { setkjcheng(e.target.value) }} /></p>
                    <p><span>限量：</span><Input value={xianliang} onChange={(e) => { setxianliang(e.target.value) }} /></p>
                    <p><span>限量剩余：</span><Input value={xianliangs} onChange={(e) => { setxianliangs(e.target.value) }} /></p>
                    <p><span>结束时间：</span><Input value={times} onChange={(e) => { settimes(e.target.value) }} /></p>
                    <p><span>砍价状态：</span><Input value={status} onChange={(e) => { setstatus(e.target.value) }} /></p>
                </Modal>
            </div>
        </div>
    );
}

export default connect((state) => {
    return {
        kanjiashop: state.kanjiaShop
    }
})(Bargain_goods);
